import {mix} from "@/utils/mix";

export const tagGenerate = (colorWeight) => {
  const { tagMixColor, primary, success, danger, warning, info, white } = colorWeight;
  const colors = {primary, success, danger, warning, info};
  const mode = {
    plain: {
      backgroundColorWeight: 0,
      borderColorWeight: 40,
      fontColorWeight: 100,
      hoverColorWeight: 100,
      keyPrefix: '-plain',
    },
    dark: {
      backgroundColorWeight: 100,
      borderColorWeight: 100,
      fontColorWeight: 0,
      hoverColorWeight: 80,
      keyPrefix: '-dark',
    },
    default: {
      backgroundColorWeight: 30,
      borderColorWeight: 20,
      fontColorWeight: 100,
      hoverColorWeight: 100,
      keyPrefix: '',
    }
  };
  const result = {};

  Object.entries(colors).forEach(([key, color]) => {
    console.log(tagMixColor)
    Object.values(mode).forEach(value => {
      result[`--tag-${key}-background-color${value.keyPrefix}`] = mix(color, tagMixColor, value.backgroundColorWeight);
      result[`--tag-${key}-border-color${value.keyPrefix}`] = mix(color, tagMixColor, value.borderColorWeight);
      result[`--tag-${key}-color${value.keyPrefix}`] = mix(color, white, value.fontColorWeight);
      result[`--tag-${key}-color-close${value.keyPrefix}`] = mix(color, tagMixColor, value.fontColorWeight);
      result[`--tag-${key}-color-close-background-hover${value.keyPrefix}`] = mix(color, tagMixColor, value.hoverColorWeight);
    })
  })

  return result;
}
